<template>
    <div>
        <Tripline 
        :value="specialTrip" :tripTitle="tripTitle"
        :empty="empty" :isShow="isShow"
        ></Tripline>
        <!--<h3>优品特色</h3>-->
    </div>
</template>

<script>
import Tripline from '../components/Tripline'
import {mapState} from "vuex"
export default {
    data:function(){
        return{
            tripTitle:"优品特色",
            isShow:false,
        }
    },
   components:{
       Tripline
   },
   mounted:function(){
       this.$store.dispatch("requestSpecialTrip");
       var content=document.getElementById("content");
        content.onscroll=(e)=>{
            if(e.target.scrollTop>=e.target.scrollTopMax){
                this.isShow=true;
                setTimeout(function() {
                    this.$store.dispatch("requestMorespecialTrip")
                    .then(data=>{
                        this.isShow=false;
                    })
                }.bind(this),700);
                
            }else{
                this.$store.commit("changeEmpty");
            }
        }
   },
   computed:{
       ...mapState([
           "specialTrip","empty"
       ])
   }

}
</script>

<style lang='css' scoped>

</style>